<template>
  <div class="comment"  v-if="visible">

<!--    <div class="comment-box" :class="suggest_word||suggest_file.length||focus_state?'input_focus':'input_no_focus'" >-->

    <div class="comment-box"  >
      <div class="comment-title">审批意见</div>
<!--      <div class="mentions-box">-->
        <a-textarea v-model:value="suggest_word"   @focus="focus_state=true" @blur="focus_state=false"  maxlength="500" show-count placeholder="填写审批意见（选填）"  rows="4"/>
<!--      </div>-->


    </div>

    <div class="">
      <a-upload
          class="img-upload"
          v-model:file-list="fileList"
          :action="$utils.imgAction"
          :headers="{ 'org-token': $store.getters.token }"
          @change="handleUploadChange"
          name="image"
          :data="{ dir: 'approval_image' }"
          accept="image/*"
          list-type="picture"
          :max-count="9"
          :showUploadList="false"
      >
        <div class="gray-icon-color  mb-10">
          <paper-clip-outlined/>
          <span class="ml-5">附件</span>
        </div>

      </a-upload>
    </div>


    <div v-if="fileList.length" class="comment-images">
      <div v-for="(item,index) in fileList" :key="index" class="comment-img-box">
        <a-image
            :width="32"
            :src="item.url"
        />
        <close-circle-filled class="close-icon" @click="deleteImage(index)"/>
      </div>
    </div>


    <a-space>
      <a-button type="primary" @click="handleOk">确定</a-button>
      <a-button @click="handleCancel">取消</a-button>
    </a-space>
  </div>

</template>

<script>
import {CloseCircleFilled, PaperClipOutlined} from '@ant-design/icons-vue'
import {ref, watch} from 'vue'
import {message} from 'ant-design-vue'
import {reactive, toRefs} from '@vue/runtime-core'

export default {
  components: {PaperClipOutlined, CloseCircleFilled},
  props:{
    visible:{
      type:Boolean,
      default:false,
    }
  },
  setup(props,{emit}) {

    const state = reactive({
      suggest_word:'',
      suggest_file:[],
      focus_state:false,
    })

    // 图片
    const fileList = ref([]);
    let images = [];
    const handleUploadChange = (info) => {
      let resFileList = [...info.fileList];
      if (resFileList.length) {
        resFileList = resFileList.map((file) => {
          if (file.response) {
            if (file.response.code == 1000) {
              file.url = file.response.data.fileUrl;
              images.push(file.url);
            } else {
              message.warning(file.response.msg);
            }
          }
          return file;
        });
      } else {
        images = [];
      }
      fileList.value = resFileList;
      state.suggest_file = fileList.value.map(item=>{
        return item.url
      })
    };

    const deleteImage = (index) => {
      fileList.value.splice(index,1)
      state.suggest_file = fileList.value.map(item=>{
        return item.url
      })
    }

    const handleOk = () => {
      const params = {
        suggest_word:state.suggest_word,
        suggest_file:state.suggest_file
      }
      emit("ok",params)
      setTimeout(()=>{
        reSet()
      },1000)
    }

    const handleCancel = () => {
      emit("cancel")
    }

    const reSet = () => {
      state.suggest_file = []
      state.suggest_word = ""
      fileList.value = []
    }

    return {
      ...toRefs(state),
      fileList,
      handleUploadChange,
      deleteImage,
      handleOk,
      handleCancel,

    }
  }
}
</script>

<style lang="less" scoped>
.comment{
  border-radius: 10px;
  width: 500px;
  //margin-bottom: 40px;
  .comment-box{
    position: relative;
    border-radius: 10px;
    margin-bottom: 10px;

    .comment-title{
      margin: 10px 0;
      font-weight: 600;
    }

    .mentions-box{

      textarea{
        padding: 10px;
      }
    }


    .img-upload{
      position: absolute;
      display: inline-block;
      width: 32px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      border-radius: 5px;
    }
  }
}

.comment-images{
  height: 45px;
  padding: 0 0 10px;

  .comment-img-box{
    position: relative;
    display: inline-block;
    margin-right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 10px;

    .close-icon{
      position: absolute;
      width: 20px;
      height: 20px;
      top: -5px;
      right: -10px;
    }
  }

}


.img-upload-white{
  bottom:15px;
  right: 16px;
  background-color: transparent;
}
.img-upload-grey{
  bottom:10px;
  right: 10px;
  background-color: #DCDCDD;
}

.input_focus{
  border: 1px solid #2681f3;
  background: white;
}
.input_no_focus{
  border: 0 solid #2681f3;
  background: #f2f3f3;
}
.gray-icon-color{
  color: #646A73;
}


</style>